/**
* @description: 路由器业务核查
* @author: JiWei
* @remark:
**/
<template>
  <view class="todo-task-main">
    <nav-bar class="header" back :title="title" @goBack="goBack" />
    <!-- 切换tab -->
    <div class="patrol-info-tab">
      <div class="info-tab-item" :class="currentTab === 'basicInfo' ? ' info-tab-current': ''" @click="tabChange('basicInfo')">基本信息</div>
      <div class="info-tab-item" :class="currentTab === 'businessInfo' ? ' info-tab-current': ''" @click="tabChange('businessInfo')">业务信息</div>
    </div>
    <view class="main-container">
      <!-- 基本信息 -->
      <div class="cable-info" v-if="currentTab === 'basicInfo'">
        <view class="plan-info-title">
          <plateTitle title="基本信息" class="plate-title-1" />
        </view>
        <view class="cable-info-container">
          <van-cell-group>
            <van-cell v-for="(item,index) in taskDetail.powerDetailArr" :key="index" :title="item.title" :value="item.text">
              <!-- <template #right-icon v-if="item.title === '实物ID'">
                  <span class="operation" v-if="taskDetail.originData.entityid !== null" @click="scanClick">核对</span>
                </template> -->
            </van-cell>
          </van-cell-group>
        </view>

        <template v-if="routerInfo.serviceState!='1'">
          <view class="plan-info-title">
            <plateTitle title="巡视信息" class="plate-title-2" />
          </view>
          <!-- 巡视照片 -->
          <view class="patrol-info-container">
            <view>设备照片</view>
            <van-divider dashed />
            <div class="image-wrap">
              <div class="image-list">
                <div class="upload-button" v-for="(imgItem, index) in files" :style="{'background-image': `url(${imgItem.bgImg})`}" @click.stop="imageHandle(imgItem, index, 'CHOOSE')">
                  <!-- <div v-if="imgItem.img" class="delete-icon" @click.stop="imageHandle(imgItem, index, 'DELETE')">×</div> -->
                  <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandle(imgItem, index, 'PREVIEW')">
                </div>
              </div>
            </div>
          </view>
          <!-- 备注 -->
          <view class="remark-info-container">
            <view>备注</view>
            <van-divider dashed />
            <div class="remark-wrap">
              <textarea class="remark-text" v-model="currentData.otherProps.remark">
                </textarea>
            </div>
          </view>
        </template>

        <view class="result-info-container">
          <van-cell-group v-for="(item, index) in currentData.tourInfoProps" :key="index">
            <!-- 不可编辑框 -->
            <van-field v-if="item.elementType === 'TEXT'" :required="item.isRequired" readonly input-align="right" :value="item.value" :label="item.title" />
          </van-cell-group>
        </view>

      </div>
      <!-- 业务信息 -->
      <div class="fibre-info" v-else>
        <view class="patrol-info-container">
          <!-- 路由器业务  -->
          <view class="plan-info-title">
            <plateTitle title="路由器业务" :isRequired="false" class="plate-title">
              <slot>
                <text class="palant-text">业务总数: {{total}}</text>
              </slot>
            </plateTitle>
          </view>
          <!-- :style="{height: scrollerHeight}" -->
          <!-- <view class="router-buinsess-wrap" > -->
          <view class="router-buinsess" v-for="(item,index) in routerList" :key="index">
            <view class="row">
              <view class="left-title">业务名称：</view>
              <view class="left-title-value">{{item.routerBuzName}}</view>
            </view>
            <view class="row">
              <view class="left-title">端口：</view>
              <view class="left-title-value">
                {{item.slotc}}-{{item.subslot}}-{{item.portName}}
                <text>({{ item.portType }})</text>
              </view>
            </view>
          </view>
          <!-- </view> -->

        </view>
        <!--巡视信息-->
        <view class="plan-info-title">
          <plateTitle title="巡视信息" class="plate-title-2" />
        </view>
        <view class="patrol-result-container">
          <van-field readonly clickable input-align="right" right-icon="arrow" :value="isCoincide" label="台账信息与现场信息是否一致" placeholder="点击选择" @click="showPicker = true" />
          <van-radio-group v-show="isCoincide === '不一致'" v-model="operation" icon-size="15px" checked-color="#417ADC">
            <van-radio name="noExist">现场无此设备，将标记此设备状态为“不存在”</van-radio>
            <van-divider dashed />
            <van-radio name="modify">现场设备信息不一致，将标记此设备状态为“修改”</van-radio>
          </van-radio-group>
        </view>
        <van-button block @click="confirmInfo">{{ buttonText() }}</van-button>
      </div>
    </view>

    <!--选择器-->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
  </view>
</template>
<script>
import config from '../../../../common/config'
import { mapGetters } from 'vuex'

let power_obj = {
  routerName: '设备名称',
  parStationIdName: '所属站点',
  parRoomName: '所属机房',
  parRack: '所属机柜编号',
  parRackScreen: '所属机柜屏眉',
  dspLevelName: '设备所属通信网等级',
  producerIdName: '设备品牌',
  modelnumberName: '设备型号',
  serilanumName: '设备顺序',
  equStatus: '设备角色',
  picture: '实物ID',
  moduleNum: '电源模块数量',
  powerSupplyMode: '电源供电方式',
  ethernetNum: '以太网口数量',
  portNum: '2M口数量',
  lightNum: '光口数量',
  comboNum: '光电复用口数量'
}

let serviceState_map = {
  1: '一致',
  2: '不存在',
  3: '新增',
  4: '更新'
}

let infoOptical_add = {
  otherProps: {
    remark: '' //备注
  },
  tourInfoProps: {
    // 显示的属性。包含巡视人和巡视时间
    tourOperResult: {
      title: '巡视结果',
      keys: 'tourOperResult',
      value: '',
      isRequired: false,
      elementType: 'TEXT'
    }, //设备名称
    tourOperName: {
      title: '巡视人',
      keys: 'tourOperName',
      value: '',
      isRequired: false,
      elementType: 'TEXT'
    }, //设备名称
    tourTimStr: {
      title: '巡视时间',
      keys: 'tourTimStr',
      value: '',
      isRequired: false,
      elementType: 'TEXT'
    } //所属站点名称
  },
  hideProps: {},
  visibleProps: {
    equname: {
      title: '设备名称',
      keys: 'equname',
      value: '',
      isRequired: true,
      elementType: 'TEXT'
    }, // 设备名称
    sitename: {
      title: '所属站点',
      keys: 'sitename',
      value: '',
      isRequired: true,
      elementType: 'TEXT',
      name: 'sitename',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //所属站点名称
    parRoom: {
      title: '所属机房',
      keys: 'parRoom',
      value: '',
      text: '',
      isRequired: false,
      elementType: 'PICKER',
      optionsParams: { type: 'room' } // 获取options需要的参数
    }, //所属机房
    parRack: {
      title: '所属机柜编号',
      keys: 'parRack',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'parRack',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //所属机柜编号
    parRackScreen: {
      title: '所属机柜屏眉',
      keys: 'parRackScreen',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'parRackScreen',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //所属机柜屏眉
    equlevel: {
      title: '设备所属通信网等级',
      keys: 'parRoom',
      value: '',
      text: '',
      isRequired: false,
      elementType: 'PICKER',
      optionsParams: { type: 'room' } // 获取options需要的参数
    }, //所属机房
    equpp: {
      title: '设备品牌',
      keys: '',
      value: '',
      isRequired: true,
      elementType: 'TEXT'
    }, // 设备型号
    equxh: {
      title: '设备型号',
      keys: '',
      value: '',
      isRequired: true,
      elementType: 'TEXT'
    }, // 设备型号
    equjs: {
      title: '设备角色',
      keys: '',
      value: '',
      isRequired: false,
      elementType: 'TEXT'
    }, // 设备角色
    equsx: {
      title: '设备顺序',
      keys: '',
      value: '',
      isRequired: true,
      elementType: 'INPUT'
    }, // 设备顺序
    entityid: {
      title: '实物ID',
      keys: 'entityid',
      value: '',
      isRequired: false,
      elementType: 'INPUT&SCAN'
    }, //实物ID
    powerBegTim: {
      title: '设备投运时间',
      keys: 'powerBegTim',
      value: '',
      text: '',
      isRequired: false,
      elementType: 'TIMEPICKER'
    }, //设备投运时间
    dymksl: {
      title: '电源模块数量',
      keys: '',
      value: '',
      isRequired: true,
      elementType: 'TEXT'
    }, // 电源模块数量
    dygdfs: {
      title: '电源供电方式',
      keys: '',
      value: '',
      isRequired: true,
      elementType: 'TEXT'
    }, // 电源模块数量
    ytwksl: {
      title: '以太网口数量',
      keys: '',
      value: '',
      isRequired: true,
      elementType: 'INPUT'
    }, // 设备顺序
    mksl: {
      title: '2M口数量',
      keys: '',
      value: '',
      isRequired: true,
      elementType: 'INPUT'
    }, // 设备顺序
    gksl: {
      title: '光口数量',
      keys: '',
      value: '',
      isRequired: true,
      elementType: 'INPUT'
    }, // 设备顺序"
    gdfyksl: {
      title: '光电复用口数量',
      keys: '',
      value: '',
      isRequired: true,
      elementType: 'INPUT'
    } // 设备顺序
  }
}
let fileTemplate = [
  {
    name: 'EQUIPMENT.jpg',
    previewName: '设备照片',
    type: 'EQUIPMENT',
    bgImg: require('../../../../static/img/bg_shebei.png'),
    raw: null, // raw文件
    img: '' // 用来显示的照片
  },
  {
    name: 'NAMEPLATE.jpg',
    previewName: '铭牌照片',
    type: 'NAMEPLATE',
    bgImg: require('../../../../static/img/bg_mingpai.png'),
    raw: null, // raw文件
    img: '' // 用来显示的照片
  },
  {
    name: 'OTHER.jpg',
    previewName: '其他照片',
    type: 'OTHER',
    bgImg: require('../../../../static/img/bg_qita.png'),
    raw: null, // raw文件
    img: '' // 用来显示的照片
  }
]
import navBar from '../../../../components/common/nav-bar'
import plateTitle from '../../../../components/business/plateTitle'
import { Dialog, Toast } from 'vant'
import moment from 'moment'

export default {
  name: 'routerOperationalVerification',
  components: { navBar, plateTitle },
  props: {},
  data() {
    return {
      total: '',
      title: '路由器业务核查',
      baseUrl: '', // 基础url
      currentTab: 'basicInfo',
      taskDetail: {},
      buttonText: () => {
        if (this.isCoincide === '一致') return '保存'
        if (this.operation === 'noExist') return '保存'
        if (this.operation === 'modify') return '去完善台账信息'
      },
      isCoincide: '不一致',
      showPicker: false,
      columns: ['一致', '不一致'],
      operation: 'modify',
      routerInfo: {},
      routerList: [],
      files: {}, // 照片map
      objId: '',
      taskSiteId: '',
      state: '',
      taskId: '',
      taskSiteName: ''
    }
  },
  computed: {
    ...mapGetters(['userData'])
    // scrollerHeight: function(){
    //   return (window.innerHeight - 500) + 'px'
    // }
  },
  watch: {},
  onLoad(option) {
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
    })
    this.objId = option.objId
    this.taskSiteId = option.taskSiteId
    this.state = option.state
    this.taskId = option.taskId
    this.taskSiteName = option.taskSiteName
    this.currentData = JSON.parse(JSON.stringify(infoOptical_add))
    this.files = JSON.parse(JSON.stringify(fileTemplate))

    this.tabChange('businessInfo')
  },
  methods: {
    tabChange(flag) {
      this.currentTab = flag
      if (flag == 'businessInfo') {
        this.getBusinessInfo()
      } else {
        this.getRouterBaseList()
      }
    },
    goBack() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/routerPatrol/routerPatrol?objId=${this.objId}&taskSiteId=${this.taskSiteId}&state=${this.state}&taskId=${this.taskId}&taskSiteName=${this.taskSiteName}`
      })
    },
    confirmInfo() {
      if (
        this.isCoincide === '一致' ||
        (this.isCoincide === '不一致' && this.operation === 'noExist')
      ) {
        Dialog.confirm({
          message:
            '所选巡视结果是否确认？确认后不可变更，如有问题请联系运维人员。'
        })
          .then(() => {
            if (this.isCoincide === '一致') {
              let checkSuccessParams = {
                LargeType: 'buiness',
                serviceState: 1, // （1 一致 2 不存在 3 新增 4 更新）
                tourOperId: this.userData.userId,
                tourOperName: this.userData.userName,
                routerid: this.objId
              }
              this.$api.updateServicestate(checkSuccessParams).then(res => {
                if (res.code == 0) {
                  Toast.success({
                    message: '保存成功',
                    onOpened: () => {
                      uni.navigateTo({
                        url: `/pages/workBench/todoTask/routerPatrol/routerPatrol?objId=${this.objId}&taskId=${this.taskId}&state=${this.state}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
                      })
                    }
                  })
                } else {
                  Toast.fail('操作失败')
                }
              })
            }
            if (this.isCoincide === '不一致' && this.operation === 'noExist') {
              // 认定设备不存在时进行保存
              let checkExistParams = {
                LargeType: 'buiness',
                serviceState: 2, // （1 一致 2 不存在 3 新增 4 更新）
                tourOperId: this.userData.userId,
                tourOperName: this.userData.userName,
                routerid: this.objId
              }
              this.$api.updateServicestate(checkExistParams).then(res => {
                if (res.code == 0) {
                  // 如果当前为巡视，且返回data为0，表示重复巡视
                  Toast.success({
                    message: '保存成功',
                    onOpened: () => {
                      uni.navigateTo({
                        url: `/pages/workBench/todoTask/routerPatrol/routerPatrol?objId=${this.objId}&taskId=${this.taskId}&state=${this.state}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
                      })
                    }
                  })
                } else {
                  Toast.fail('操作失败')
                }
              })
            }
          })
          .catch(() => {})
      }
      if (this.isCoincide === '不一致' && this.operation === 'modify') {
        // 认定设备存在但是需要完善信息
        let checkSuccessParams = {
          LargeType: 'buiness',
          serviceState: 4, // （1 一致 2 不存在 3 新增 4 更新）
          tourOperId: this.userData.userId,
          tourOperName: this.userData.userName,
          routerid: this.objId
        }
        this.$api.updateServicestate(checkSuccessParams).then(res => {
          if (res.code === 0) {
            uni.navigateTo({
              url: `/pages/workBench/todoTask/routerPatrol/routerBusinessInformationPerfection?type=update&objId=${this.objId}&taskId=${this.taskId}&state=${this.state}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
            })
          } else {
            Toast.fail('操作失败')
          }
        })
      }
    },
    onConfirm(value) {
      this.isCoincide = value
      this.showPicker = false
    },
    getRouterBaseList() {
      this.$api.queryRouter({ routerid: this.objId }).then(res => {
        if (res.data.length != 0) {
          this.taskDetail = {
            originData: '',
            powerDetailArr: Object.keys(power_obj).map((item, index) => {
              return {
                title: power_obj[item],
                text: res.data[0][item]
              }
            })
          }
          this.routerInfo = res.data[0]
          // this.files = res.data[0].files
          if(res.data[0].files.length === 0) {
            this.files = JSON.parse(JSON.stringify(fileTemplate));
          }else {
            this.files = this.files.map((item) => {
              return {
                ...item,
                img: res.data[0].files[item.type] ? this.baseUrl + res.data[0].files[item.type]: '',
              }
            })
          }
          this.currentData.otherProps.remark = res.data[0].remark

          this.currentData.tourInfoProps['tourOperResult'].value =
            serviceState_map[res.data[0].serviceState]
          this.currentData.tourInfoProps['tourOperName'].value =
            res.data[0].tourOperName
          this.currentData.tourInfoProps['tourTimStr'].value = moment(
            res.data[0].tourTim
          ).format('YYYY-MM-DD HH:mm')
        }
      })
    },
    getBusinessInfo() {
      this.$api.queryRouterBuz({ routerid: this.objId }).then(res => {
        console.log('业务数据', res.data)
        // this.routerList = [...res.data.ROUBUZ,...res.data.ROUBUZ,...res.data.ROUBUZ,...res.data.ROUBUZ, ...res.data.ROUBUZ,...res.data.ROUBUZ,...res.data.ROUBUZ,...res.data.ROUBUZ]
        this.routerList = res.data.ROUBUZ
        this.total = res.data.TOTAL_NUMBER
      })
    }
  }
}
</script>
<style scoped lang="scss">
.todo-task-main {
  width: 100vw;
  height: 100vh;
  background: #f8f8f8;
  overflow: hidden;
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .header-bar {
    flex-shrink: 0;
    // height: px2vh(220);
    background: #417adc;
    overflow: hidden;
    margin-top: px2vh(-1);
    position: sticky;
    top: px2vh(158);
    z-index: 9;
    .get-state-tab {
      width: calc(100% - #{px2vw(60)});
      height: px2vh(90);
      border-radius: px2vw(20);
      box-sizing: border-box;
      margin: px2vh(20) px2vw(30) px2vh(20);
      background-color: rgba(255, 255, 255, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      border: px2vw(1) solid rgba(198, 215, 245, 1);
      .info-tab-item {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 1);
        font-weight: bold;
        font-size: px2vw(38);
        &.info-tab-current {
          height: px2vh(80);
          margin: 0 px2vw(4);
          margin-right: px2vw(10);
          border-radius: px2vw(20);
          background-color: rgba(255, 255, 255, 0.7);
          color: rgba(65, 122, 220, 1);
          font-weight: Bold;
        }
      }
    }
  }
  .patrol-info-tab {
    width: calc(100% - #{px2vw(60)});
    height: px2vh(120);
    border-radius: px2vw(20);
    box-sizing: border-box;
    margin: px2vh(40) px2vw(30) px2vh(37);
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .info-tab-item {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(51, 51, 51, 1);
      font-size: px2vw(38);
      &.info-tab-current {
        height: px2vh(100);
        margin-right: px2vw(10);
        border-radius: px2vw(20);
        background-color: rgba(65, 122, 220, 1);
        color: rgba(255, 255, 255, 1);
        font-weight: Bold;
      }
    }
  }
  .main-container {
    height: calc(100vh - #{px2vh(410)});
    overflow: auto;
    /deep/.van-field__label,
    /deep/.van-field__control:read-only,
    /deep/.van-field__body .van-field__control,
    /deep/.van-cell-group .van-cell {
      font-size: px2vw(42);
    }
    /deep/.van-field__label {
      width: auto;
    }
    .plate-title,
    .plate-title-1,
    .plate-title-2 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    .cable-info {
      width: calc(100% - #{px2vw(60)});
      margin: auto;
      padding-bottom: px2vh(30);
      .cable-info-container {
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;
      }
      .patrol-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;

        /deep/.van-radio {
          margin-right: px2vw(139.5);
        }

        .image-wrap {
          width: 100%;
          display: flex;
          img {
            width: px2vw(215);
            height: px2vw(215);
            margin-right: px2vw(40);
            border-radius: px2vw(6);
          }

          .image-list {
            width: 100%;
            display: flex;
            .upload-button {
              width: px2vw(215);
              height: px2vw(215);
              background-size: cover;
              margin-right: px2vw(40);
              position: relative;
              .delete-icon {
                position: absolute;
                top: px2vw(-20);
                right: px2vw(-20);
                width: px2vw(40);
                height: px2vw(40);
                background-color: rgba(0, 0, 0, 0.7);
                border-radius: 50%;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
      .result-info-container {
        margin-top: px2vh(30);
      }
      .remark-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;
        margin-top: px2vh(30);
        .remark-wrap {
          background-color: #fafafa;
          padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
          border-radius: px2vw(20);
          .remark-text {
            height: px2vh(150);
          }
        }
      }
    }
    .fibre-info {
      .plan-info-title {
        width: calc(100% - #{px2vw(60)});
        margin-left: px2vw(30);
        margin-bottom: px2vh(30);
        .palant-img {
          width: px2vw(60);
        }
      }
      .patrol-info-container {
        padding: 0 px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
      }
      .router-buinsess-wrap {
        // border: 1px solid;
        height: px2vh(760);
        overflow: auto;
      }
      .router-buinsess {
        height: auto;
        border-radius: px2vh(20);
        background: #fff;
        margin-bottom: px2vh(20);
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: px2vh(36);
        .row {
          display: flex;
          align-items: center;
          line-height: px2vh(80);
          .left-title {
            width: px2vw(300);
            text-align: right;
          }
          .left-title-value {
            text {
              margin-left: px2vw(60);
            }
          }
        }
      }
    }
    /deep/.van-button {
      margin-top: px2vh(60);
      height: px2vh(120);
      color: #fff;
      background-color: #417adc;
      border: 1px solid #417adc;
      border-radius: px2vh(60);
    }
    .patrol-result-container {
      font-size: px2vw(36);
      color: #666666;
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #ffffff;
      .van-radio-group {
        padding: px2vh(60) px2vw(42);
      }
    }
  }
}
</style>
